<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header id="header">
    <div class="contorls">
      <div class="close"></div>
      <div class="max"></div>
      <div class="mini"></div>
    </div>
    <div class="title">wwog/devtool</div>
  </header>
  <div class="wline"></div>
  <main id="main">
    <aside id="aside">
      <ul>
        <li data-temp="_window">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-window-01"></use>
          </svg>
          <p>窗口操作</p>
        </li>
        <li data-temp="_json">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-json"></use>
          </svg>
          <p>JSON调试</p>
        </li>
        <li data-temp="_regexp">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhengzebiaodashi"></use>
          </svg>
          <p>正则调试</p>
        </li>
        <li data-temp="_jietu">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jietu"></use>
          </svg>
          <p>窗口截图</p>
        </li>
        <li data-temp="_color">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yansexuanze"></use>
          </svg>
          <p>配色取色</p>
        </li>
        <li data-temp="_request">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wangluo"></use>
          </svg>
          <p>请求调试</p>
        </li>
        <li data-temp="_runtime">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-Nodejs"></use>
          </svg>
          <p>JS环境</p>
        </li>

      </ul>
    </aside>
    <div class="hline"></div>
    <div id="container">
      <div>
        <!--最初被替换 -->
      </div>
    </div>
  </main>

</body>
<template id="_window">
  <div class="temp_ctn">
    <div id="win_container">
      <div id="win_attr">
        <div id="attr_base">
          <div id="base_hwnd">
            窗口句柄: 
            <input type="text" spellcheck="false">
          </div>
          <div id="base_title" >
            窗口标题: 
            <input type="text" spellcheck="false">
          </div>
          <div id="base_pos">
            窗口位置: 
            <input type="text" spellcheck="false">
          </div>
        </div>
      </div>
      <div id="win_list_container">
        <ul id="win_list">

        </ul>
      </div>
    </div>
  </div>
</template>
<template id="_json">
  <div class="temp_ctn">
    JSON
  </div>
</template>
<template id="_regexp">
  <div class="temp_ctn">
    RegExp
  </div>
</template>
<template id="_color">
  <div class="temp_ctn">
    Color
  </div>
</template>
<template id="_request">
  <div class="temp_ctn">
    Request
  </div>
</template>
<template id="_runtime">
  <div class="temp_ctn">
    NodeJs
  </div>
</template>
<template id="_jietu">
  <div class="temp_ctn">
    截图
  </div>
</template>
<script src="./public/icon/iconfont.js"></script>
<script src="./dist/render.js"></script>

</html>